<template>
    <div style="display: flex;flex-direction: column;justify-content: left;align-content: flex-start">
        <span>
            <i class="el-icon-edit"></i>
            请选择滤镜效果：
        </span>
        <el-collapse v-model="activeNames">
            <el-collapse-item title="常用模版" name="1">
                <el-checkbox label="反转颜色" v-model="re.revertChecked"></el-checkbox>
                <el-checkbox label="灰度" v-model="re.grayChecked"></el-checkbox>
            </el-collapse-item>
            <el-collapse-item title="颜色滤镜" name="2">
                <el-transfer v-model="re.colorSelectArr" :data="colorArr" :titles="titles"></el-transfer>
            </el-collapse-item>
            <el-collapse-item title="颜色属性调节" name="3">
                <div class="block">
                    <span>亮度</span>
                    <el-slider v-model="re.value1"></el-slider>
                </div>
                <!--<div class="block">-->
                    <!--<span>Gamma</span>-->
                    <!--<div style="display:flex;flex-direction: row">-->
                        <!--<i style="margin-right: 5px;">R</i>-->
                        <!--<el-slider v-model="re.value2_1" style="width: 90%;"></el-slider>-->
                    <!--</div>-->
                    <!--<div style="display:flex;flex-direction: row">-->
                        <!--<i style="margin-right: 5px;">G</i>-->
                        <!--<el-slider v-model="re.value2_2" style="width: 90%;"></el-slider>-->
                    <!--</div>-->
                    <!--<div style="display:flex;flex-direction: row">-->
                        <!--<i style="margin-right: 5px;">B</i>-->
                        <!--<el-slider v-model="re.value2_3" style="width: 90%;"></el-slider>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="block">
                    <span>对比度</span>
                    <el-slider v-model="re.value3"></el-slider>
                </div>
            </el-collapse-item>
            <el-collapse-item title="像素属性调节" name="4">
                <div class="block">
                    <span>噪声</span>
                    <el-slider v-model="re.value4"></el-slider>
                </div>
                <div class="block">
                    <span>模糊</span>
                    <el-slider v-model="re.value5"></el-slider>
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
    </div>
</template>

<script>
    export default {
        name: "MyFilter",
        data:function () {
            return{
                colorArr:[
                    {key:'Sepia',label:'Sepia'},
                    {key:'Black/White',label:'Black/White'},
                    {key:'Brownie',label:'Brownie'},
                    {key:'Vintage',label:'Vintage'},
                    {key:'Kodachrome',label:'Kodachrome'},
                    {key:'Technicolor',label:'Technicolor'},
                    {key:'Polaroid',label:'Polaroid'},
                ],
                titles:['备选列表','已选列表'],
                activeNames:'',
                re:{
                    revertChecked:false,
                    grayChecked:false,
                    colorSelectArr:[],
                    value1:50,
                    value2_1:50,
                    value2_2:50,
                    value2_3:50,
                    value3:0,
                    value4:0,
                    value5:0,
                }
            }
        },
        methods:{
            handleSubmit:function () {
                this.$emit('filter',this.re)
            }
        }
    }
</script>

<style scoped>

</style>
